<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>聊天室列表</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
</head>

<body>
    <div class="container">
        <div class="panel panel-body">
            <h1>聊天室列表</h1>
            {{range $k,$v := .rooms}}
            <div class="panel panel-default panel-body box-show ">
                <div class="col-sm-3">
                    {{$v.Name}}
                </div>
                <div class="col-sm-3">
                    {{$v.Number}}
                </div>
                <div class="col-sm-3">
                    {{$v.UserNum}}
                </div>
                <div class="col-sm-3">
                    <a href="javascript:;" onclick="JoinRoom('{{$v.Number}}')" class="room">进入聊天室</a>
                </div>
            </div>
            {{end}}
        </div>
        <div class="panel panel-body">
            <h2>添加聊天室</h2>
        <form role="form" method="post" action="/rooms/add">
            <div class="form-group">
                <input type="text" class="form-control" id="name" name="name" placeholder="请输入聊天室名称">
            </div>
            <button type="submit" class="btn btn-default">添加</button>
        </form>
        </div>
    </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    
        function JoinRoom(Number) {
            var name = prompt("请输入您的用户名", "")
            if (name != null && name != "") {
                window.location.href = "/room/" + Number + "\/" + name
            }
        }
    
    </script>
</body>

</html>